<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>QQ音乐 - 首页</title>
<link rel="stylesheet" href="styles/music.css">
</head>
<body>
  
<header>
  <img src="imgs/qqmusic.png" alt="logo">
</header>
<main>

  <!-- 歌单推荐 -->
  <section class="section">
    <h2>歌单推荐</h2>
    <div class="tabs">
      <a href="#" class=" item active">为你推荐</a>
      <a href="#" class="item">运动</a>
      <a href="#" class="item">网络歌曲</a>
      <a href="#" class="item">思念</a>
      <a href="#" class="item">官方歌单</a>
      <a href="#" class="item">情歌</a>
    </div>
    <div class="playlist-row" id="playlist"></div>
  </section>

  <!-- 新歌首发 -->
  <section class="new-section">
    <h2>新歌首发</h2>
    <div class="new-tabs">
      <a href="#" class="new-item active">内地</a>
      <a href="#" class="new-item">港台</a>
      <a href="#" class="new-item">欧美</a>
      <a href="#" class="new-item">韩国</a>
      <a href="#" class="new-item">日本</a>
    </div>
    <div class="new-grid" id="songlist"></div>
  </section>

  <!-- MV -->
  <section class="mv-section">
    <h2>MV</h2>
    <div class="mv-tabs">
      <a href="#" class="active mv-item1">精选</a>
      <a href="#" class="mv-item1">内地</a>
      <a href="#" class="mv-item1">韩国</a>
      <a href="#" class="mv-item1">港台</a>
      <a href="#" class="mv-item1">日本</a>
    </div>
    <div class="mv-grid" id="mvlist"></div>
  </section>


   <div class="page">
        <a href="#" class="page-item page-current">1</a>
        <a href="#" class="page-item">2</a>
        <a href="#" class="page-item">3</a>
        <a href="#" class="page-item">4</a>
        <span class="page-item page-more">...</span>
        <a href="#" class="page-item">1344</a>
        <a href="#" class="page-item">&gt;</a>
    </div>
</main>
<footer></footer>
<script>
// 从 task.json 加载数据并渲染
fetch('task.json')/*发起网络请求获取 JSON 文件*/
  .then(res => res.json())//将响应转换为 JSON 格式
  .then(data => {//获取到解析后的 data 对象，并调用三个渲染函数分别处理不同类型的数据
    renderPlaylists(data.playlist);
    renderSongs(data.songlist);
    renderMVs(data.mvlist);
  })
  .catch(err => console.error('加载 JSON 失败:', err));//捕获并处理可能发生的错误

function renderPlaylists(list){// 获取存放播放列表的容器元素
  const container = document.getElementById('playlist');
  // 遍历播放列表数据
  list.forEach(item => {
    // 构建单个播放列表项的HTML
    const html = `
      <div class="playlist">
        <div class="img-wrap">
          <img src="${item.cover}" alt="${item.title}">
          <div class="img-mask"></div>
          <div class="play-icon">
            <img src="imgs/cover_play.png" alt="Play Icon">
          </div>
        </div>
        <div class="info">
          <div class="title">${item.title}</div>
          <div class="count">播放量：${(item.listen_num/10000).toFixed(1)}万</div>
        </div>
      </div>`;
      // 将构建好的HTML添加到容器末尾
    container.insertAdjacentHTML('beforeend', html);
  });
}

function renderSongs(list){
  const container = document.getElementById('songlist');
  list.forEach(song => {
    const min = Math.floor(song.interval / 60);
    const sec = (song.interval % 60).toString().padStart(2,'0');
    const html = `
      <div class="song-item">
        <img src="${song.cover}" alt="">
        <div class="song-info">
          <div class="song-title">${song.name}</div>
          <div class="song-artist">${song.singer.join(', ')}</div>
        </div>
        <div class="song-time">${min}:${sec}</div>
      </div>`;
    container.insertAdjacentHTML('beforeend', html);
  });
}

function renderMVs(list){
  const container = document.getElementById('mvlist');
  list.forEach(mv => {
    const html = `
      <div class="mv-item">
        <div class="img-wrap">
          <img src="${mv.cover}" alt="${mv.title}">
          <div class="img-mask"></div>
          <div class="play-icon">
            <img src="imgs/cover_play.png" alt="Play Icon">
          </div>
        </div>
        <div class="mv-meta">
          <div class="mv-name">${mv.title}</div>
          <div class="mv-views">播放 ${mv.listen_num}</div>
        </div>
      </div>`;
    container.insertAdjacentHTML('beforeend', html);
  });
}
</script>
</body>
</html>
